// Chart.js组件在setup.ts中注册

// 通用的图表配置
export const commonOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top' as const,
      labels: {
        usePointStyle: true,
        padding: 15,
        font: {
          size: 10,
          family: 'Inter, system-ui, sans-serif'
        }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(15, 23, 42, 0.9)',
      titleColor: '#f8fafc',
      bodyColor: '#f8fafc',
      borderColor: 'rgba(148, 163, 184, 0.2)',
      borderWidth: 1,
      cornerRadius: 8,
      padding: 12,
      displayColors: true,
      titleFont: {
        size: 13,
        weight: 'bold' as const
      },
      bodyFont: {
        size: 12
      }
    }
  },
  scales: {
    x: {
      grid: {
        display: false
      },
      ticks: {
        color: '#64748b',
        font: {
          size: 9
        }
      }
    },
    y: {
      grid: {
        color: 'rgba(148, 163, 184, 0.1)',
        drawBorder: false
      },
      ticks: {
        color: '#64748b',
        font: {
          size: 9
        }
      }
    }
  },
  elements: {
    point: {
      radius: 4,
      hoverRadius: 6,
      borderWidth: 2
    },
    line: {
      borderWidth: 3,
      tension: 0.4
    },
    bar: {
      borderRadius: 6,
      borderSkipped: false
    }
  },
  animation: {
    duration: 1000,
    easing: 'easeOutQuart' as const
  }
}

// 颜色配置
export const colors = {
  primary: {
    bg: 'rgba(59, 130, 246, 0.8)',
    border: 'rgb(59, 130, 246)',
    gradient: ['rgba(59, 130, 246, 0.8)', 'rgba(59, 130, 246, 0.2)']
  },
  success: {
    bg: 'rgba(34, 197, 94, 0.8)',
    border: 'rgb(34, 197, 94)',
    gradient: ['rgba(34, 197, 94, 0.8)', 'rgba(34, 197, 94, 0.2)']
  },
  warning: {
    bg: 'rgba(245, 158, 11, 0.8)',
    border: 'rgb(245, 158, 11)',
    gradient: ['rgba(245, 158, 11, 0.8)', 'rgba(245, 158, 11, 0.2)']
  },
  error: {
    bg: 'rgba(239, 68, 68, 0.8)',
    border: 'rgb(239, 68, 68)',
    gradient: ['rgba(239, 68, 68, 0.8)', 'rgba(239, 68, 68, 0.2)']
  },
  purple: {
    bg: 'rgba(168, 85, 247, 0.8)',
    border: 'rgb(168, 85, 247)',
    gradient: ['rgba(168, 85, 247, 0.8)', 'rgba(168, 85, 247, 0.2)']
  },
  indigo: {
    bg: 'rgba(99, 102, 241, 0.8)',
    border: 'rgb(99, 102, 241)',
    gradient: ['rgba(99, 102, 241, 0.8)', 'rgba(99, 102, 241, 0.2)']
  }
}

// 创建渐变背景
export const createGradient = (ctx: CanvasRenderingContext2D, colorConfig: string[]) => {
  const gradient = ctx.createLinearGradient(0, 0, 0, 400)
  gradient.addColorStop(0, colorConfig[0])
  gradient.addColorStop(1, colorConfig[1])
  return gradient
}
